<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3新特性</title>
		<style type="text/css">
			/* 参考文档：菜鸟文档：
			 http://www.runoob.com/css3/css3-mediaqueries-ex.html
			 */
			
			body {
				/* height: 800px;
				background: url(imgs/bg1.png) left top no-repeat;
				background-size: 90% 90%; */
				/* background-origin: padding-box; */
			}

			div {
				width: 120px;
				height: 120px;
				border: #0000FF solid 1px;
			}

			#div1 {
				background: -webkit-linear-gradient(45deg, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.8));
				/* Safari 5.1 - 6 */
				background: -o-linear-gradient(45deg, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.8));
				/* Opera 11.1 - 12*/
				background: -moz-linear-gradient(45deg, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.8));
				/* Firefox 3.6 - 15*/
				background: linear-gradient(45deg, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.8));
				/* 标准的语法 */
			}

			#div2 {
				/* Safari 5.1 - 6.0 */
				background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
				/* Opera 11.6 - 12.0 */
				background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
				/* Firefox 3.6 - 15 */
				background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
				/* 标准的语法 */
				background: repeating-radial-gradient(red, yellow 10%, green 15%);
			}

			#div3:hover {
				transform: rotate(-30deg);
				-ms-transform: rotate(-30deg);
				/* IE 9 */
				-webkit-transform: rotate(-30deg);
				/* Safari and Chrome */
			}

			#div4,
			#div3 {
				/* transition: width 2s;
				-webkit-transition: width 2s; */
				transition: width 2s, height 2s, transform 2s;
				-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
				/* Safari */
			}

			#div4:hover {
				width: 200px;

				/* 动画效果 */
				animation: myChangeColor2 5s infinite;
				-webkit-animation: myChangeColor2 5s infinite;
				/* Safari 与 Chrome */
			}

			/* 定义一个动画帧 */
			@keyframes myChangeColor2 {

				/* 动画开始帧的状态 */
				0% {
					background: red;
				}

				25% {
					background: yellow;
				}

				50% {
					background: blue;
				}

				/* 动画结束帧的状态 */
				100% {
					background: green;
				}
			}

			@-webkit-keyframes myChangeColor2

			/* Safari 与 Chrome */
				{
				0% {
					background: red;
				}

				25% {
					background: yellow;
				}

				50% {
					background: blue;
				}

				100% {
					background: green;
				}
			}

			/* 定义一个动画帧 */
			@keyframes myChangeColor {

				/* 动画开始帧的状态 */
				from {
					background: red;
				}

				/* 动画结束帧的状态 */
				to {
					background: yellow;
				}
			}

			@-webkit-keyframes myChangeColor

			/* Safari 与 Chrome */
				{
				from {
					background: red;
				}

				to {
					background: yellow;
				}
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div4"></div>
	</body>
</html>
